<template>
	<view>
		<view class="header">
			<!-- <u-navbar :is-back="false" title-color="black" title="叫醒" :background="background"></u-navbar> -->
		</view>
		
		<view class="content" :style="{ top: statusBar + 54 + 'px' }">
			<view class="content-tit">注册</view>
			<view class="content-desc">绑定手机号</view>
			<view class="content-box">
				<view class="content-box-item">
					<input type="text" v-model="name" placeholder="请输入姓名" />
				</view>
				<view class="content-box-item">
					<input type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
				</view>
				<view class="login-form u-flex">
				    <view class="u-flex-1 u-padding-right-20">
				        <u-input class="u-font-32" height="130" type="number" maxlength="26" v-model="code" 
				        placeholder="请输入验证码" placeholder-style="color:#c4c4c4;font-size:32rpx" :password-icon="see" />
				    </view>
				    <view class="grey yanzhengm" :class="{ active: time < 60 }" @click="$noMultipleClicks(getCode)">{{ txt }}</view>
				</view>
			</view>
			<view class="login" @click="submit">立即绑定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                noClick:true,
				background: {backgroundColor : 'rgba(23,102,233,0)'},
				statusBar:0,
				name: '',
                mobile:'',
                code: '', //验证码
                time: 60, // 倒计时
                txt: '发送验证码',
                see: true,
			}
		},
		onLoad() {
			//状态栏高度
			uni.getSystemInfo({
				success: (res) => {
					this.statusBar = res.statusBarHeight;
				}
			});
		},
		methods: {
            // 立即绑定
            submit() {
            	let _this = this;
				if (!_this.name) {
					_this.$toast('请输入姓名');
					return false;
				}
            	if (!_this.mobile) {
            		_this.$toast('请输入手机号码');
            		return false;
            	}
            	if (!_this.$checkPhone(_this.mobile)) {
            		_this.$toast('手机号码格式不正确');
            		return false;
            	}
            	if (!_this.code) {
            		_this.$toast('请输入验证码');
            		return false;
            	}
            	_this.$ajax('bindMobile', {
            		userToken: _this.$getSync('userToken'), //用户编号
            		mobile: _this.mobile, 
            		verify: _this.code,
                    type: 2, //2-绑定
					nickname: _this.name,
            	}).then(ret => {
            		if (ret.status == 0) {
						_this.$toast('绑定成功');
            			_this.$setSync('userToken', ret.data.userToken); //更新token
						_this.$setSync('MOBILE', _this.mobile);
            			setTimeout(() => {
							_this.$backT()
						},500)
            		} else {
            			_this.$toast(ret.message);
            		}
            	});
            },
            
			//发送验证码
            getCode() {
                let _this = this;
                if (!_this.mobile) {
                    _this.$toast('请输入手机号码');
                    return false;
                }
                if (!_this.$checkPhone(_this.mobile)) {
                    _this.$toast('手机号码格式不正确');
                    return false;
                }
                if (_this.time != 60) {
                    return false;
                }
                _this.$ajax('verify', {
                        mobile: _this.mobile,
                        type: 2,// 1-登录 2-注册 3-找回密码 4-绑定手机号 5-修改密码
                    }).then(ret => {
                        if (ret.status == 0) {
                            _this.txt = _this.time + 'S后可再次获取';
                            let fn = setInterval(() => {
                                _this.time--;
                                _this.txt = _this.time + 'S后可再次获取';
                                if (_this.time == 0) {
                                    clearInterval(fn);
                                    _this.time = 60;
                                    _this.txt = '获取验证码';
                                }
                            }, 1000);
                        } else {
                            _this.$toast(ret.message);
                        }
                    });
            },
			
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
		width: 100%;
	}
	
	.header {
		position: fixed;
		top: 0;
		z-index: 3;
	}
	
	/deep/.u-border-bottom:after {
		border: 0 solid #fff !important;
	}
	
	.bg{
		width: 100%;
		height: 448upx;
	}
	
	.content {
		width: 100%;
		left: 0;
		position: absolute;
		padding-top:30upx;
		box-sizing: border-box;
	}
	
	.content-tit{
		font-size: 54upx;
		color: #000;
		padding-left: 60upx;
		box-sizing: border-box;
		font-weight: bold;
		margin-bottom: 20upx;
	}
	
	.content-desc{
		font-size: 36upx;
		color: #000;
		padding-left: 60upx;
		box-sizing: border-box;
		margin-bottom: 60upx;
	}
	
	.content-box{
		background-color: #FFFFFF;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 40upx 60upx 0;
		box-sizing: border-box;
	}
	
	.content-box-item{
		width: 100%;
		height: 144upx;
		border-bottom: 1px solid #e9e9e9;
	}
	
	.content-box-item>input{
		width: 100%;
		height: 144upx;
		line-height: 144upx;
	}
	
	.content-box-items{
		width: 100%;
		height: 144upx;
		border-bottom: 1px solid #e9e9e9;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.content-box-items>input{
		width: 60%;
		height: 144upx;
		line-height: 144upx;
	}
	
	.content-box-items>view{
		padding:26upx 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		color: #848383;
		background-color: #f8f8f8;
		border-radius: 30px;
	}
	
	.login{
		width: 90vw;
		margin: 160upx auto 110upx;
		height: 92upx;
		line-height: 92upx;
		text-align: center;
		color: #FFFFFF;
		background-color: #00b6bc;
		border-radius: 30px;
		font-size: 34upx;
	}
	
	.wechat{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.wechat>text:first-child{
		font-size: 30upx;
	}
	
	.wechat>text:last-child{
		font-size: 24upx;
		color: #999999;
	}
	
	.wechat>image{
		width: 91upx;
		height: 91upx;
		margin-top: 40upx;
		margin-bottom: 10upx;
	}
    
    .login-form {
        border-bottom: 1rpx solid #e9e9e9;
    }
    
    .yanzhengm {
        padding: 14rpx 30rpx;
        border-radius: 30rpx;
        font-size: 28rpx;
        display: flex;
        /* color: #fff;
        background: #1461f3; */
        color: #848383;
        background-color: #f8f8f8;
    }
    
    .active {
        color: #848383;
        background-color: #f8f8f8;
        /* background: #cccccc;
        color: #fff; */
    }
</style>
